import React, { lazy } from "react";
import { useRoutes, Navigate } from "react-router-dom";
import Login from "../views/Login/Login";
import Home from "../views/Home/Home";
import Layout from "../components/layout/index";
import Room from "../views/Room/Room";
import Build from "../views/Build/Build";
import Go from "../views/Go/Go";
import List from "../views/RoomList/RoomList";

// const Room = lazy(() => import("../views/Room/Room"));
// const Build = lazy(() => import("../views/Build/Build"));

// 允许我们通过一个数组的方式来进行路由的配置
// 通过这种方式  能更好的让我们进行模块化的开发 灵活的进行路由 配置

const frameOut = [
  { path: "/login", element: <Login /> },
  { path: "/go", element: <Go /> },
];

const frameIn = [
  { path: "index", element: <Home /> },
  { path: "*", element: <Navigate to="/index" /> },
  { path: "setroom", element: <Room /> },
  { path: "setbuild", element: <Build /> },
  { path: "roomlist", element: <List /> },
];

const Router = () => {
  let element = useRoutes([
    ...frameOut,
    {
      path: "/",
      element: <Navigate to="/index" />,
    },
    {
      path: "/*",
      element: <Layout />,
      children: frameIn,
    },
  ]);

  return element;
};

export default Router;
